<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fallback Example</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <script src="../loader.js"></script>
  <script src="./helper.js"></script>

  <style>
  table{border-collapse:collapse;}
  th, td {
    padding: 6px 18px; border: 1px solid #CCC;
  }
  </style>
</head>

<body>
  <h1>Fibonacci Sequence</h1>
  <div id="output">Running test...</div>

  <script>
    // const output = document.getElementById('output')

    function startTest (fn) {
      return loadJS('./js/fib.js')
        .then(instance => {
          return fn('javascript', instance)
        })
        .then(instance => {
          return loadJS('./js/fib.asm.js').then(ins => fn('asm.js', ins))
        })
        .then(instance => {
          return loadWebAssembly('./js/fib.wasm').then(ins => fn('asm.js -> wasm', ins))
        })
        .then(instance => {
          return loadWebAssembly('./fibc.wasm').then(ins => fn('C -> wasm', ins))
        })
        // .then(instance => {
        //   return loadJS('./tail/fib.asm.js').then(ins => fn('asm.js (tail)', ins))
        // })
        // .then(instance => {
        //   return loadWebAssembly('./tail/fib.wasm').then(ins => fn('asm.js -> wasm (tail)', ins))
        // })
        // .then(instance => {
        //   return loadWebAssembly('./tail/fibc.wasm').then(ins => fn('C -> wasm (tail)', ins))
        // })
    }

    const result = []

    startTest((type, instance) => {
      const fib = instance.exports.fib || instance.exports._fib

      const counts = [
        15, 20, 25, 30, 31, 32, 33,
        34, 35, 36, 37, 38, 39, 40,
        // 50, 60, 4200,
        // 10000, 20000, 20100
      ]

      for (let i = 0; i < counts.length; ++i) {

        const beg = performance.now()
        fib(counts[i])
        const end = performance.now()

        if (!result[i]) {
          result[i] = { n: counts[i] }
        }
        result[i][type] = end - beg
      }

      return instance
    }).then(() => {
      result.forEach(group => {
        group.Ratio = group['javascript'] / group['C -> wasm']
      })
      output.innerHTML = ''
      output.appendChild(createTable(result))
    })
  </script>
</body>
</html>
